<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<meta name="description" content="大学生就业实训,品质就业,职业规划,IT行业人才基地" />
		<title>蜗牛书城(woniuxy.com)-正品低价、品质保障、配送及时、轻松购物！</title>

		<!-- 引入Bootstrap核心样式文件 -->
		<link th:href="@{/asserts/bootstrap-3.4.1/css/bootstrap.min.css}" rel="stylesheet">
		<!-- 引入jQuery核心js文件 -->
		<script th:src="@{/asserts/javascript/jQuery-1.12.4.js}"></script>
		<!-- 引入BootStrap核心js文件 -->
		<script th:src="@{/asserts/bootstrap-3.4.1/js/bootstrap.min.js}"></script>


		<link rel="shortcut icon" th:href="@{/favicon.ico}" type="image/x-icon" />
		
		<link th:href="@{/asserts/css/common.css}" rel="stylesheet" />
		<link th:href="@{/asserts/css/top.css}" rel="stylesheet" />
		<link th:href="@{/asserts/css/foot.css}" rel="stylesheet" />
		
		<link th:href="@{/asserts/css/index.css}" rel="stylesheet" />
		
	</head>
	<body>
		<!--  最顶部的导航栏 -->
		<div th:replace="~{commons/tag::topNav}"></div>
		<!--顶部导航结束-->
		
		<!--  =================== head =============================== -->
		<div th:replace="~{commons/tag::headerNav}"></div>
		<!--头部结束-->


		<div class="cate-menu container no-padding clear">
		<!--	<ul class="fl">
				<li><a href="#">程序设计</a></li>
				<li><a href="#">数据库</a></li>
				<li><a href="#">网络与数据通信</a></li>
				<li><a href="#">科普读物</a></li>
				<li><a href="#">建筑学</a></li>
			</ul>-->
			<!-- bootstrap轮播图 -->
			<div id="carousel-example-generic" class="carousel slide fl" data-ride="carousel">
				<!-- Indicators -->
				<ol class="carousel-indicators">
					<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
					<li data-target="#carousel-example-generic" data-slide-to="1"></li>
				</ol>

				<!-- Wrapper for slides -->
				<div class="carousel-inner" role="listbox">
					<div th:class="${b.id==1?'item active':'item'}"  th:each="b : ${bannerList}">
						<img th:src="|http://localhost:10001/${b.imagePath}|" alt="...">
					</div>
				</div>

				<!-- Controls -->
				<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
					<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
					<span class="sr-only">Previous</span>
				</a>
				<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
					<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
					<span class="sr-only">Next</span>
				</a>
			</div>
		</div>

		<!-- 中间的广告 -->
		<!--<div class="container no-padding mt15">
			<div class="f clear">
				<div class="ad-box fl">
					<div class="left fl">
						<p><a href="#">古典小说系列</a></p>
						<p><a href="#">九折优惠</a></p>
					</div>
					<div class="right fl">
						<a href="#">
							<img src="img/ad1.jpeg" />
						</a>
					</div>
				</div>

				<div class="ad-box fl">
					<div class="left fl">
						<p><a href="#">古典小说系列</a></p>
						<p><a href="#">九折优惠</a></p>
					</div>
					<div class="right fl">
						<a href="#">
							<img src="img/ad2.jpeg" />
						</a>
					</div>
				</div>

				<div class="ad-box fl">
					<div class="left fl">
						<p><a href="#">古典小说系列</a></p>
						<p><a href="#">九折优惠</a></p>
					</div>
					<div class="right fl">
						<a href="#">
							<img src="img/ad3.jpeg" />
						</a>
					</div>
				</div>

			</div>
		</div>
-->
		<!-- 好书热卖  -->
		<div class="container no-padding mt15">
			<h4>好书热卖</h4>
			<div class="book-box">
				<div class="book-left fl">
					<img src="http://localhost:10001/good-book.png" />
				</div>
				<div class="book-right">
					<ul>
						<li th:each="h : ${hotList}">
							<a th:href="@{/book/searchDetail(id=${h.id})}">
								<img th:src="|http://localhost:10001/${h.imgsrc}|" alt="">
								<p class="book-name" th:text="${h.name}">java核心技术</p>
								<p class="book-price">￥<span th:text="${h.price}"></span></p>
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>

		<!-- 新书推荐  -->
		<div class="container no-padding mt15">
			<h4>新书推荐</h4>
			<div class="book-box">
				<div class="book-left fl">
					<img src="http://localhost:10001/new-book.png" />
				</div>
				<div class="book-right">
					<ul>
						<li th:each="n :${newList}">
							<a th:href="@{/book/searchDetail(id=${n.id})}">
								<img th:src="|http://localhost:10001/${n.imgsrc}|" alt="">
								<p class="book-name" th:text="${n.name}">java核心技术</p>
								<p class="book-price">￥<span th:text="${n.price}"></span></p>
							</a>
						</li>

					</ul>
				</div>
			</div>
		</div>

		<!-- 收藏最多  -->
		<div class="container no-padding mt15">
			<h4>收藏最多</h4>
			<div class="book-box">
				<div class="book-left fl">
					<img src="http://localhost:10001/collect-book.png" />
				</div>
				<div class="book-right">
					<ul>
						<li th:each="c :${colList}">
							<a th:href="@{/book/searchDetail(id=${c.id})}">
								<img th:src="|http://localhost:10001/${c.imgsrc}|" alt="">
								<p class="book-name" th:text="${c.name}">java核心技术</p>
								<p class="book-price">￥<span th:text="${c.price}"></span></p>
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>

		<!-- =============== 最后的网站底部 =============== -->
		<div th:replace="~{commons/tag::footer}"></div>
	</body>
</html>
